<template>
  <div id="app">
    <div :class="['alertTitel', { bigalertTitel: showalertTitel }]">
      您一件商品都没有选喔
    </div>
    <EmptyCar v-if="isEmpty"> </EmptyCar>
    <div v-else>
      <div class="app-top">
        <span class="iconfont icon-gouwuche"></span>
        <span class="car-titel">
          <h3>我的购物车</h3>
          <p>My shopping cart</p>
        </span>
      </div>
      <div class="app-titel">
        <span>商品信息</span>
        <span>数量</span>
        <span>单价</span>
        <span>操作</span>
      </div>
      <div class="app-content">
        <div
          class="app-goodsbox"
          v-for="(item, index) in $store.state.userCar"
          :key="item.goods_id"
        >
          <div>
            <input
              type="checkbox"
              name=""
              id="inputbox"
              :checked="item.flag"
              @click="
                changechecked($event, item.goods_price, item.goods_count, index)
              "
            />
            <img :src="$store.state.url + item.goods_coverimg" />
            <span>
              <h4>{{ item.goods_name }}</h4>
              <p>{{ item.goods_english }}</p>
            </span>
          </div>
          <span>
            <el-input-number
              v-model="item.goods_count"
              :min="0"
              :max="10"
              label="描述文字"
            ></el-input-number>
          </span>
          <span>￥{{ item.goods_price }}</span>
          <span
            class="el-icon-delete"
            @click="deletgoods($event, item.goods_id)"
            :data-index="index"
          ></span>
        </div>
      </div>
      <h2 id="parts-titel">加购配件</h2>
      <div class="partsBox">
        <div class="parts" v-for="item in $store.state.parts" :key="item.id">
          <img :src="$store.state.url + item.goods_coverimg" alt="" />
          <div id="parts-text">
            <span>{{ item.goods_name }}</span>
            <p>￥{{ item.goods_price }}</p>
          </div>
          <span
            class="iconfont icon-gouwuche"
            id="addcarbtm"
            @click="changeisclickcar(item.goods_id)"
          ></span>
          <addcar v-if="$store.state.isclickcar">
            <template slot="cancel"
              ><span @click="changeisclickcar">取消</span></template
            >
          </addcar>
        </div>
      </div>
      <div class="content-btm">
        <div class="content-btm-left">
          全选
          <span>
            <input
              type="checkbox"
              name=""
              :checked="isAllcheckgoods"
              id="allinputbox"
              @click="isAllselect"
            />
          </span>
          <h4>已选择{{ selectCount }}件商品</h4>
          <p>配送范围内满98元免配送费</p>
        </div>
        <div class="content-btm-right">
          <div class="btm-right-top">
            <span>合计</span>
            <h3>￥{{ cartotel }}</h3>
          </div>
          <div class="btm-right-btn">
            <span><router-link to="/">继续逛逛</router-link></span>
            <span @click="payment">结算</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import addcar from "../addcar/addcar.vue";
import EmptyCar from "../emptyCar/EmptyCar.vue";
export default {
  components: { addcar, EmptyCar },
  data() {
    return {
      showalertTitel: false,
      isEmpty: false,
      isclickcar: false,
      isAllcheckgoods: true,
      reducePrice: 0,
      selectCount: 0,
      oldcount: 0,
    };
  },

  async mounted() {
    this.getusercar();
    this.getparts();
  },
  computed: {
    cartotel() {
      let totle = this.$store.state.userCar.reduce((a, b) => {
        if (b.flag == false) {
          return a;
        }
        return b.goods_price * b.goods_count + a;
      }, 0);
      return (totle.toFixed(2) - this.reducePrice).toFixed(2);
    },
  },
  methods: {
    async getusercar() {
      let userid = 1;
      let res = await this.axios("/ljy/usercar", { params: { userid } });
      if (!res.data[0]) {
        this.isEmpty = true;
      } else {
        res.data.map((el) => {
          el.flag = true;
        });
        this.oldcount = res.data.length;
        this.selectCount = res.data.length;
        // this.cartotel();
        this.$store.commit("changeUserCar", res.data);
      }
    },
    async getparts() {
      let res = await this.axios("/ljy/getParts");
      this.$store.commit("changeparts", res.data);
    },
    changechecked(e, price, count, index) {
      this.$store.state.userCar[index].flag =
        !this.$store.state.userCar[index].flag;
      this.isAllcheckgoods = this.$store.state.userCar.every((el) => {
        return el.flag;
      });
    },
    isAllselect(e) {
      this.isAllcheckgoods = !this.isAllcheckgoods;
      if (e.target.checked) {
        this.$store.commit("changegoodsFlag", true);
        this.selectCount = this.oldcount;
      } else {
        this.$store.commit("changegoodsFlag", false);
        this.selectCount = 0;
      }
    },
    deletgoods(e, goods_id) {
      this.$store.commit("delectCarGoods", e.target.dataset.index);
      this.axios("/ljy/deletGoodscar", { params: { goods_id: goods_id } });
    },
    changeisclickcar(goods_id) {
      this.$store.commit("changeGoodsid", goods_id);
      this.$store.commit("changeIsclickcar");
    },
    payment() {
      if (this.cartotel == "0.00") {
        this.showalertTitel = true;
        setTimeout(() => {
          this.showalertTitel = false;
        }, 1000);
      } else {
        this.$router.push("/Payment");
      }
    },
  },
};
</script>
<style lang="scss" scoped>
#app {
  width: 100%;
  margin-top: 120px;
  background-color: #f5f3f3;
}
.alertTitel {
  position: fixed;
  width: 200px;
  height: 50px;
  text-align: center;
  color: white;
  font-size: 18px;
  line-height: 50px;
  background-color: rgba(0, 0, 0, 0.8);
  left: 40%;
  top: 60%;
  transform: scale(0);
}
.bigalertTitel {
  transform: scale(1);
}
.app-top {
  display: flex;
  width: 92%;
  height: 230px;
  margin: 0 auto;
  justify-content: flex-start;
  .icon-gouwuche {
    font-size: 80px;
    line-height: 230px;
    color: rgb(189, 184, 184);
  }
  .car-titel {
    margin-top: 90px;
    margin-left: 20px;
    color: rgb(92, 89, 89);
    h3 {
      font-size: 26px;
    }
    p {
      font-size: 14px;
      margin-top: 5px;
      color: rgb(189, 184, 184);
    }
  }
}
.app-titel {
  display: flex;
  width: 92%;
  background-color: white;
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  justify-content: space-around;
}
.app-content {
  background-color: white;
  width: 92%;
  margin: 10px auto;
}
.app-goodsbox {
  display: flex;
  width: 92%;
  align-items: center;
  border-bottom: 1px solid rgb(228, 226, 226);
  justify-content: space-around;
  height: 225px;
  img {
    width: 130px;
    height: 130px;
    margin: 0 30px;
  }
  .el-icon-delete {
    font-size: 25px;
    color: #a1a1a1;
  }
  .el-icon-delete:hover {
    color: black;
    cursor: pointer;
  }
  div {
    display: flex;
    // position: relative;
    span:hover {
      cursor: pointer;
    }
    #inputbox {
      height: 30px;
      width: 30px;
      line-height: 30px;
      margin-top: 50px;
    }
  }
}
.partsBox {
  width: 92%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
#parts-titel {
  width: 92%;
  margin: 0 auto;
}
.parts {
  display: flex;
  width: 240px;
  height: 260px;
  position: relative;
  justify-content: center;
  //   background-color: #a1a1a1;
  flex-direction: column;
  img {
    width: 130px;
    margin: 0 auto;
  }
  #parts-text {
    width: 130px;
    margin: 10px auto;
  }
  #addcarbtm {
    position: absolute;
    right: 30px;
    bottom: 30px;
    font-size: 20px;
    width: 30px;
    height: 30px;
    color: #726e6e;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: #ffe32a;
  }
}
.content-btm {
  width: 92%;
  height: 300px;
  background-color: white;
  margin: 10px auto;
  display: flex;
  justify-content: space-between;
  .content-btm-left,
  .content-btm-right {
    display: flex;
    width: 30%;
    align-items: center;
    flex-wrap: wrap;
    // background-color: #a1a1a1;
    justify-content: space-around;
    input {
      height: 30px;
      width: 30px;
      line-height: 30px;
      margin-left: 10px;
      margin-right: 130px;
    }
    h4 {
      width: 50%;
    }
    p {
      margin-left: 180px;
    }
  }
}
.btm-right-btn {
  span {
    display: inline-block;
    text-align: center;
    font-weight: bolder;
    border-radius: 15px;
    text-decoration: none;
  }
}
.btm-right-btn span:first-child {
  border: 2px solid #ccc;
  width: 125px;
  height: 35px;
  line-height: 35px;
  margin-right: 5px;
}
.btm-right-btn span:last-child {
  background-color: #ffe32a;
  width: 130px;
  line-height: 40px;
  height: 40px;
}
.btm-right-top {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
</style>